<%--
  Created by IntelliJ IDEA.
  User: 薛之谦
  Date: 2025/10/14
  Time: 20:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="header.jsp"/>
<style>
    body {
        background-color: #f8f9fa;
    }

    .fixed-sidebar {
        position: sticky;
        top: 20px;
    }

    .question-card {
        margin-bottom: 20px;
    }

    .answer-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 10px;
    }

    .answer-card-grid .btn {
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
</style>
<div class="container-fluid p-4">
    <div class="row">
        <!-- 左侧：题目区域 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header text-center">
                    <h3>${exam.name}</h3>
                </div>
                <div class="card-body" style="max-height: 85vh; overflow-y: auto;">
                    <form id="examForm" action="examServlet?action=submit" method="post">
                        <input type="hidden" name="examId" value="${exam.id}">
                        <%-- 题目循环开始 --%>
                        <div id="q1" class="question-card">
                            <h5>1. (单选题) [2分] Java中哪个关键字用于声明常量？</h5>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="answer_1" id="q1_optA" value="A">
                                <label class="form-check-label" for="q1_optA">A. var</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="answer_1" id="q1_optB" value="B">
                                <label class="form-check-label" for="q1_optB">B. final</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="answer_1" id="q1_optC" value="C">
                                <label class="form-check-label" for="q1_optC">C. static</label>
                            </div>
                        </div>
                        <hr>
                        <div id="q2" class="question-card">
                            <h5>2. (多选题) [4分] 以下哪些是Java的集合类？</h5>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="answer_2" value="A" id="q2_optA">
                                <label class="form-check-label" for="q2_optA">A. ArrayList</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="answer_2" value="B" id="q2_optB">
                                <label class="form-check-label" for="q2_optB">B. HashMap</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="answer_2" value="C" id="q2_optC">
                                <label class="form-check-label" for="q2_optC">C. String</label>
                            </div>
                        </div>
                        <hr>
                        <div id="q3" class="question-card">
                            <h5>3. (简答题) [10分] 请简述什么是面向对象的三大特征？</h5>
                            <textarea name="answer_3" class="form-control" rows="5"></textarea>
                        </div>
                        <%-- 题目循环结束 --%>
                    </form>
                </div>
            </div>
        </div>

        <!-- 右侧：信息与答题卡 -->
        <div class="col-md-3">
            <div class="fixed-sidebar">
                <!-- 倒计时 -->
                <div class="card text-center mb-3">
                    <div class="card-header">剩余时间</div>
                    <div class="card-body">
                        <h2 id="countdown" class="text-danger">01:29:55</h2>
                    </div>
                </div>

                <!-- 答题卡 -->
                <div class="card">
                    <div class="card-header">答题卡</div>
                    <div class="card-body">
                        <div class="answer-card-grid">
                            <%-- JS或JSTL生成答题卡按钮 --%>
                            <a href="#q1" class="btn btn-outline-primary">1</a>
                            <a href="#q2" class="btn btn-outline-primary">2</a>
                            <a href="#q3" class="btn btn-outline-primary">3</a>
                            <a href="#q4" class="btn btn-outline-primary">4</a>
                            <%-- ...更多按钮 --%>
                            <a href="#q5" class="btn btn-outline-primary">5</a>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="d-grid gap-2 mt-3">
                    <button class="btn btn-danger btn-lg" id="submitBtn">提交试卷</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 简单的倒计时和提交确认示例，实际需要更完善的逻辑
    document.getElementById('submitBtn').addEventListener('click', function () {
        if (confirm('确认要提交试卷吗？提交后将无法修改。')) {
            document.getElementById('examForm').submit();
        }
    });
    // 答题卡标记逻辑：当用户选择一个选项时，对应的按钮变色
    // ...
</script>
<jsp:include page="footer.jsp"/>
